﻿@{ViewBag.Title = "Create";}
@section header{ 
    <link rel="stylesheet" href="/Scripts/OSRM/leaflet/leaflet.css" type="text/css"/>
    <link rel="stylesheet" href="/Scripts/OSRM/main.css" type="text/css"/>
    <script src="/Scripts/OSRM/leaflet/leaflet-src.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/base/leaflet/L.Bugfixes.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/base/leaflet/L.LabelMarker.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/base/leaflet/L.LabelMarkerIcon.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/base/leaflet/L.BingLayer.js" type="text/javascript"></script>

    <script src="/Scripts/OSRM/OSRM.base.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/OSRM.config.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/utils/OSRM.browsers.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/utils/OSRM.classes.js" type="text/javascript"></script>

    <script src="/Scripts/OSRM/main.js" type="text/javascript"></script>
    
    <script src="/Scripts/OSRM/utils/OSRM.EventHandler.js" type="text/javascript"></script>

    <script src="/Scripts/OSRM/base/osrm/OSRM.Control.Attribution.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/base/osrm/OSRM.Control.Layers.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/base/osrm/OSRM.Control.Locations.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/base/osrm/OSRM.Control.Zoom.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/base/osrm/OSRM.Control.Map.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/base/osrm/OSRM.Marker.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/base/osrm/OSRM.Route.js" type="text/javascript"></script>

    <script src="/Scripts/OSRM/base/OSRM.Map.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/base/OSRM.Markers.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/base/OSRM.Routes.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/base/OSRM.HistoryRoutes.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/gui/OSRM.GUI.js" type="text/javascript"></script>
    @*    <script src="/Scripts/OSRM/gui/OSRM.GUIBoxGroup.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/gui/OSRM.GUIBoxHandle.js" type="text/javascript"></script>*@
    <script src="/Scripts/OSRM/gui/OSRM.Selector.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/gui/OSRM.MainGUI.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/routing/OSRM.Routing.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/routing/OSRM.RoutingAlternatives.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/routing/OSRM.RoutingDescription.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/routing/OSRM.RoutingGeometry.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/gui/OSRM.RoutingGUI.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/gui/OSRM.RoutingEngineGUI.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/routing/OSRM.RoutingNoNames.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/base/OSRM.Via.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/base/OSRM.Geocoder.js" type="text/javascript"></script>

    <script src="/Scripts/OSRM/utils/OSRM.CSS.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/utils/OSRM.JSONP.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/localization/OSRM.Localization.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/printing/OSRM.Printing.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/utils/OSRM.Utils.js" type="text/javascript"></script>
    <script src="/Scripts/OSRM/api/OSRM.Api.js" type="text/javascript"></script>
    <style>
        .ratio4x3 {width: 100%;height: 0;padding-bottom: 75%; }
        input[type=text] {width: 100%;box-sizing: border-box;height: 28px; }
    </style>}
@section script{
    <script>
        OSRM.API.load({
            inputSource: document.querySelector('inputSource'),
            inputTarget: document.querySelector('inputTarget'),
        });
        OSRM.API.onLoad(function() {
            OSRM.API.onAddMarker(function(event) {
                console.log('onAddMarker ' + event.detail.label);
            });
            OSRM.API.onGeocode(function(event) {
                console.log('onGeocode ' + event.detail);
            });
            OSRM.API.onResponseChanged(function (event) {
                console.log('onResponseChanged ' + event.detail.toJSON());
            });
        });
        document.querySelector('#start').onclick = function() { //querySelectorAll like jquery selector, element.dataset.go (data-go) element.classList.toString() == 'className'
            if (this.classList.contains('icon-youtube-play')) {
                this.innerHTML = ' Stop';
                this.classList.remove('icon-youtube-play');
                this.classList.add('icon-stop');
                OSRM.API.watchPosition();
                
            } else {
                this.innerHTML = ' Start';
                this.classList.remove('icon-stop');
                this.classList.add('icon-youtube-play');
                OSRM.API.stopWatchingPosition();
            }
        };
    </script>}
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span4">
                <div class="well sidebar-nav">
                    <ul class="nav nav-list">
                        <li class="nav-header">Localization</li>
                        <li><input id="inputSource" type="text" class="input-block-level"></li>
                        <li><input id="inputTarget" type="text" class="input-block-level"></li>
                        <li class="nav-header"><span>Tracking</span></li>
                        <li><span id='start' class="icon-youtube-play"> Start</span></li>
                        <li class="nav-header">Track</li>
                        <li><span>Validate</span></li>
                    </ul>
                </div>
            </div>
            <div class="span8">
                <div id="map" class="ratio4x3"></div>
            </div> 
        </div>
    </div>

